<template>
    <div>
        <div class="handle_header">
          <el-card class="box-card">
            <div class="search">
              <el-form :inline="true">
                <el-form-item label="用户账号">
                  <el-input size="mini" v-model="option.account" placeholder="请输入用户账号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" @click="search">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </div>
        <div class="tableList">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :row-style="{'font-size':'12px','color':'#324253'}"
            :header-row-style="{'font-size':'12px','color':'#8994A1'}">
            <el-table-column align="center" prop="account" label="用户账号"></el-table-column>
            <el-table-column align="center" prop="phone" label="电话"></el-table-column>
            <el-table-column align="center" prop="name" label="姓名"></el-table-column>
            
          </el-table>
          <pagination
            v-show="tableData.length>0"
            @handleChange="handleCurrentChange"
            :total="+total"
            :page-size="option.pageSize"
            :current-page="option.curPage"
          ></pagination>
        </div>
    </div>
</template>

<script>
    import md5 from 'js-md5'
    export default {
        name:'userList',
        data(){
            return {
                tableData: [],
                total: 0,
                option: {
                    pageSize: 20,
                    curPage: 1
                },
                userDialog:false,
          }
        },
        methods:{
            getList(){
                // 获取接口
                this.tableData = [{
                  account:'zhangsan',
                  phone:'123',
                  name:'张三'
                },{
                  account:'zhangsan',
                  phone:'123',
                  name:'张三'
                },{
                  account:'zhangsan',
                  phone:'123',
                  name:'张三'
                },]
                this.total = this.tableData.length
            },
            search(){
              this.option.curPage = 1;
              this.getList();
            },
            handleCurrentChange(val, currentPage) {
                this.option.pageSize = val;
                this.option.curPage = currentPage;
                this.getList();
            },
        },
        mounted(){
          this.getList();
        },
    }
</script>

<style lang="less" scoped>

</style>